<style>
#QueryCondTable{
	margin: 4px 0px;
}
#QueryRecordButton{
	margin-right: 16px;
}
#QueryCondTable .QuerySpan{
	margin-right: 8px;
}
#QueryCondTable .QuerySpan .TextLabel{
	padding-left: 0px;
	padding-right: 0px;
}
</style>

<div>
	<table id='QueryCondTable'>
		<tr>
			<td v-for='(item,index) in querylist'>
				<span v-if='item.optionlist' class='QuerySpan'>
					<v-select :id="item.name+'_select'" :title='item.title' :option='item.optionlist'></v-select>
				</span>
				<span v-else-if='item.querytype==5' class='QuerySpan'>
					<v-datetimetext :id="item.name+'_begin'" :title='item.title' placeholder='起始时间' readonly></v-datetimetext>
					<v-datetimetext :id="item.name+'_end'" placeholder='截止时间' readonly></v-datetimetext>
				</span>
				<span v-else-if='item.querytype==4' class='QuerySpan'>
					<v-datetext :id="item.name+'_begin'" :title='item.title' placeholder='起始日期' readonly></v-datetext>
					<v-datetext :id="item.name+'_end'" placeholder='截止日期' readonly></v-datetext>
				</span>
				<span v-else-if='item.querytype==3' class='QuerySpan'>
					<v-text :id="item.name+'_text'" :title='item.title' placeholder='模糊匹配'></v-text>
				</span>
				<span v-else-if='item.querytype==2' class='QuerySpan'>
					<v-text :id="item.name+'_text'" :title='item.title' placeholder='前缀匹配'></v-text>
				</span>
				<span v-else class='QuerySpan'>
					<v-text :id="item.name+'_text'" :title='item.title' placeholder='完全匹配'></v-text>
				</span>
			</td>
			<td v-if='querylist.length>0'><v-button id='QueryRecordButton' title='查询'></v-button></td>
			<td v-if='operbutton&&operbutton.length>0'><button v-if='isFunction(item.editable)?item.editable():(item.editable||item.editable==null)' v-for='(data,index) in operbutton' v-show='isFunction(data.visable)?data.visable():(data.visable||data.visable==null)' v-bind:disabled='isFunction(data.disable)?data.disable():data.disable' @click='data.click($recordvmdata.recordview.getSelectList(),$event.currentTarget)' class='TextButton' :style="'float:none;margin:0px 3px;color:'+data.color||'#000'">{{data.title}}</button></td>
			<td id='RecordOperTd'></td>
		</tr>
	</table>
	<div id='RecordListDiv'></div>
</div>

<script>
var $recordvmdata = {
	title: {},
	filter: {},
	colist: [],
	sortflag: 0,
	sortindex: 0,
	querylist: [],
	operbutton: [],
	getColumnItem: function(name){
		var colist = this.colist;
		for (var i = 0; i < colist.length; i++){
			if (name == colist[i].name) return colist[i];
		}
		return null;
	}
};

getHttpResult("/getcolumnlist", {tabid: '${tabid}'}, function(data){
	if (data.code > 0) $recordvmdata.colist = data.list;
});

for (var i = 0; i < $recordvmdata.colist.length; i++){
	var item = $recordvmdata.colist[i];

	item.name = item.name.toLowerCase();
	$recordvmdata.title[item.name] = item.title;

	var end = item.filter.length - 1;

	if (end > 0){
		let filter = null;

		try{
			eval('filter=' + item.filter);
		}
		catch(e){
		}

		if (isFunction(filter)){
			$recordvmdata.filter[item.name] = filter;
		}
		else if (item.filter[0] == '(' && item.filter[end] == ')'){
			var arr = item.filter.substring(1, end).split(',');
			
			if (arr.length > 0){
				var valuelist = [''];
				var colorlist = [''];
				var optionlist = [''];

				for (var j = 0; j < arr.length; j++){
					var msg = arr[j].trim();
					var list = msg.split(':');

					if (list.length > 1){
						valuelist.push(list[0].trim());
						optionlist.push(list[1].trim());

						if (list.length > 2){
							colorlist.push(list[2].trim());
						}
						else{
							colorlist.push('');
						}
					}
					else{
						colorlist.push('');
						valuelist.push(msg);
						optionlist.push(msg);
					}
				}

				item['valuelist'] = valuelist;
				item['optionlist'] = optionlist.join('|');

				$recordvmdata.filter[item.name] = function(text){
					for (var k = 0; k < valuelist.length; k++){
						if (text == valuelist[k]){
							if (colorlist[k].length > 0) return "<font color='" + colorlist[k]+ "'>" + optionlist[k] + '</font>';
							return optionlist[k];
						}
					}
					return text;
				}
			}
		}
	}

	if (item.querytype > 0){
		$recordvmdata.querylist.push(item);
	}
}

setTimeout(function(){
	$('#RecordOperTd').html('${recordoperhtml}');

	getVue('QueryCondTable', $recordvmdata);

	$('.QuerySpan .TextLabel').each(function(){
		if ($(this).val() == ''){
			$(this).css('background', 'none');
			$(this).css('border', 'none');
			$(this).css('width', '1.5px');
		}
	});

	var vmdata = Object.assign({}, $recordvmdata);

	$recordvmdata['recordview'] = vmdata['recordview'] = new RecordListView('RecordListDiv', '/getrecordlist', vmdata, function(){
		var param = {tabid: '${tabid}'};

		if ($recordvmdata.sortflag){
			param['sortflag'] = $recordvmdata.sortflag;
		}

		if ($recordvmdata.sortindex){
			param['sortindex'] = $recordvmdata.sortindex;
		}

		for (var i = 0; i < vmdata.querylist.length; i++){
			var item = vmdata.querylist[i];

			if (item.valuelist){
				param[item.name] = item.valuelist[$('#' + item.name + '_select').val()]; 
			}
			else if (item.querytype == 4 || item.querytype == 5){
				param[item.name] = $('#' + item.name + '_begin').val() + "," + $('#' + item.name + '_end').val();
			}
			else{
				param[item.name] = $('#' + item.name + '_text').val(); 
			}
		}

		return param;
	});

	$recordvmdata['reload'] = vmdata.recordview.reload;

	function filter(elem){
		var msg = elem.value;
		var pos = elem.id.lastIndexOf('_');

		if (pos > 0 && msg.length > 0){
			var name = elem.id.substring(0, pos);
			var item = vmdata.getColumnItem(name);

			if (item && item.filter && item.filter[0] == '/'){
				if (!eval(item.filter).test(msg)) elem.value = '';
			}
		}
	}

	$('#QueryRecordButton').click(function(){
		vmdata.recordview.reload(true);
	});

	$('#QueryCondTable .QuerySpan input').change(function(){
		filter(this);
	}).keyup(function(e){
		if (e.keyCode == 13){
			vmdata.recordview.reload(true);
		}
		else{
			filter(this);
		}
	});

	$('#QueryCondTable .QuerySpan select').change(function(){
		vmdata.recordview.reload(true);
	});
});
</script>